<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Colorlib Templates">
    <meta name="author" content="Colorlib">
    <meta name="keywords" content="Colorlib Templates">

    <title>Seller Regist</title>

    <!-- Main CSS-->
    <link href="../../ohj/css/main.css" rel="stylesheet" media="all">
    <!--===============================================================================================-->
	<link rel="icon" type="image/png" href="../PGJ/images/icons/favicon.png"/>
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="../PGJ/vendor/bootstrap/css/bootstrap.min.css">
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="../PGJ/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="../PGJ/fonts/themify/themify-icons.css">
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="../PGJ/fonts/Linearicons-Free-v1.0.0/icon-font.min.css">
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="../PGJ/fonts/elegant-font/html-css/style.css">
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="../PGJ/vendor/animate/animate.css">
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="../PGJ/vendor/css-hamburgers/hamburgers.min.css">
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="../PGJ/vendor/animsition/css/animsition.min.css">
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="../PGJ/vendor/select2/select2.min.css">
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="../PGJ/vendor/slick/slick.css">
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="../PGJ/vendor/noui/nouislider.min.css">
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="../PGJ/css/util.css">
        <link rel="stylesheet" type="text/css" href="../PGJ/css/main.css">
    <!--===============================================================================================-->
</head>

<body class="animsition">
    <% include ../topbar/topbar.html %>
    <div class="container1-page">
        <div>
            <div class="wrapper wrapper--w900">
                <div class="card card-6">
                    <div>
                        <h5 class="m-text4 t-center">상품 등록</h5><br><br><br>
                    </div>
                    <div class="card-body">
                        <form method="post" action='/itemregister'>
                            <div class="form-row">
                            <h5 class="m-text20 p-b-24">
                                <%= data.userData.userID %> 님의 소중한 물품을 등록합니다.<input type="hidden" name="user"
                                    value="<%= data.userData.userID %>">
                            </h5>
                        </div>
                            <div class="form-row">
                                    <div class="name">Category</div>
                                    <div class="value">
                                        <select class="selection-2" name="item_category">
                                            <% for(var i=0; i<data.cateData.length; i++) { %>
                                            
                                            <option value='<%= data.cateData[i].content %>'><%= data.cateData[i].content %></option>
                                            <% } %>
                                        </select>
                                    </div>
                                </div>
                            <div class="form-row">
                                <div class="name">Name</div>
                                <div class="value">
                                    <input type="text" name="item_name" id="name" class="input--style-6"
                                        placeholder="Name">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="name">Price</div>
                                <div class="value">
                                    <div class="input-group">
                                        <input type="text" name="item_price" id="price" class="input--style-6"
                                            placeholder="Price">
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="name">Information</div>
                                <div class="value">
                                    <div class="input-group">
                                        <input type="text" name="item_info" id="info" class="input--style-6"
                                            placeholder="Information">
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="name">Image</div>
                                <div class="value">
                                    <div class="input-group js-input-file">
                                        <input class="input-file" type="file" name="item_img" id="file">
                                        <label class="label--file" for="file">Choose file</label>
                                        <div id='preview'>
                                            <!-- 미리보기 공간 -->
                                        </div>
                                    </div>
                                    <div class="label--desc">Upload your CV/Resume or any other relevant file. Max file
                                        size 50 MB</div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <button class="btn btn--radius-2 btn--blue-2" type="submit">Register</button>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script>
        var upload = document.querySelector('#file');
        var preview = document.querySelector('#preview');

        upload.addEventListener('change', function (e) {
            var get_file = e.target.files;

            var image = document.createElement('img');

            var reader = new FileReader();

            reader.onload = (function (aImg) {
                console.log(1);

                return function (e) {
                    console.log(3);

                    aImg.src = e.target.result
                }
            })(image)

            if (get_file) {

                reader.readAsDataURL(get_file[0]);
                console.log(2);
            }

            preview.appendChild(image);
        })
    </script>


    <!-- Container Selection -->
    <div id="dropDownSelect1"></div>
    <div id="dropDownSelect2"></div>


    <!--===============================================================================================-->
    <script type="text/javascript" src="../PGJ/vendor/jquery/jquery-3.2.1.min.js"></script>
    <!--===============================================================================================-->
    <script type="text/javascript" src="../PGJ/vendor/animsition/js/animsition.min.js"></script>
    <!--===============================================================================================-->
    <script type="text/javascript" src="../PGJ/vendor/bootstrap/js/popper.js"></script>
    <script type="text/javascript" src="../PGJ/vendor/bootstrap/js/bootstrap.min.js"></script>
    <!--===============================================================================================-->
    <script type="text/javascript" src="../PGJ/vendor/select2/select2.min.js"></script>
    <script type="text/javascript">
        $(".selection-1").select2({
            minimumResultsForSearch: 20,
            dropdownParent: $('#dropDownSelect1')
        });

        $(".selection-2").select2({
            minimumResultsForSearch: 20,
            dropdownParent: $('#dropDownSelect2')
        });
    </script>
    <!--===============================================================================================-->
    <script src="../PGJ/js/main.js"></script>
    <!-- Jquery JS-->
    <script src="../../ohj/vendor/jquery/jquery.min.js"></script>


    <!-- Main JS-->
    <script src="../../ohj/js/global.js"></script>

</body><!-- This templates was made by Colorlib (https://colorlib.com) -->

</html>
<!-- end document-->